ECMAScript 6 est le nom de la dernière version standardisé de JavaScript.
Si vous utilisez JavaScript pour vos développements, vous avez sans doute remarquez que JavaScript est un language un peu à part. Il existe un système d'héritage "prototypal", des fonctions "anonymes" ... Le besoin d'une nouvelle standardisation s'est fait sentir pour fournir à JavaScript les moyens de développer des applications web robustes.
Cette standardisation a été approuvé par l'organisme de normalisation en Juin 2015 : cela signifie que ce standard va être supporté de plus en plus par les navigateurs dans les temps à venir. ECMAScript 6 a été annoncé pour la première fois en 2008, et bientôt il deviendra inévitable.
Pour votre information, ECMAScript6, ECMAScript 2015 et ES6 désignent la même chose. Nous utiliserons ES6 comme nom, car c'est le surnom le plus populaire.
ES6, via sa nouvelle syntaxe, apporte plusieurs nouvelles évolutions à JavaScript. Voici les éléments les plus intéressants que nous utiliserons dans le cadre de ce cours.
PS: Pas besoin de tout retenir, survolez simplement la liste ci-dessous pour vous familiariser avec la syntaxe de ES6.
Les classes
ES6 introduit une nouvelle syntaxe: le mot-clef class. C'est le même mot clé que dans d'autres langages, mais sachez que c'est toujours de l'héritage par prototype qui tourne derrière, mais vous n'avez plus à vous en soucier.
class Vehicule {
constructor(couleur, nombreRoueMotrice) {
this.couleur = couleur;
this.nombreRoueMotrice = nombreRoueMotrice;
this.moteurAllumer = false;
}
demarrer() {
this.moteurAllumer = true;
}
couperMoteur() {
this.moteurAllumer = false;
}
}Voilà une classe JavaScript, bien différente de ce que l'on avait précédemment. Si vous avez bien remarqué, on a même droit à un constructeur. C’est pas mal pour du JavaScript ! :)
Le nouveau mot-clef let
Le mot-clé let permet de déclarer une variable locale, dans le contexte où elle a été assignée.
Par exemple, les instructions que vous écrivez dans le corps d'une fonction ou à l'extérieur n'ont pas le même contexte. Normalement une instruction if n'a pas de contexte en soi, mais maintenant si, avec le mot clé let. Cela peut être utile quand on veut effectuer beaucoup d'opérations sur une variable et que vous ne voulez pas polluer d'autres contextes des variables qui ne sont pas nécessaires dans d'autres contextes :
var x = 1;
if(x < 10) {
let v = 1;
v = v + 21;
console.log(v);
}
// v n'est pas définie, car v a été déclaré avec 'let' et non 'var'.
console.log(v);En général, garder un contexte global propre est vivement conseillé, et c'est pourquoi ce mot clé let est vraiment le bienvenu ! Sachez que let a été pensé pour remplacer var, alors nous n'allons pas nous en priver dans ce cours.
Le nouveau mot-clef const
Le mot clé const quant à lui, permet de déclarer ... des constantes ! Voyons comment cela fonctionne:
const PI = 3.141592 ;
Une déclaration de constante ne peut se faire qu'une fois, une fois définie, vous ne pouvez plus changer sa valeur.
C'est bien pratique si vous avez besoin de définir des valeurs une bonne fois pour toutes dans votre application.
Attention, le comportement est un peu différent pour une constante de tableau ou d'objet. Vous ne pouvez pas modifier la référence vers le tableau ou l'objet, mais vous pouvez continuer à modifier les valeurs à l'intérieur tableau, ou les propriétés de l'objet.
Les fonctions fléchées
Les fonctions fléchées, ou arrow functions, ne sont pas des fonctions classiques, parce qu’elles ne définissent pas un nouveau contexte comme les fonctions traditionnelles. Nous les utiliserons beaucoup dans le cadre de la programmation asynchrone qui nécessite beaucoup de fonctions anonymes.
La structure d'une fonction fléchée est toujours la même: (paramètres) => { corps de la fonction }.
La fonction suivante :
bouton.onclick = function() {
envoyerMail(this.email);
}Correspond donc à la fonction fléchée suivante :
bouton.onclick = () => { envoyerEmail(this.email); }
Je vous conseille de vous habituer dès maintenant à cette nouvelle syntaxe, et nous allons l'utiliser tout le temps ! 🙂
Les paramètres de fonctions par défaut
En JavaScript ES6, on peut définir facilement des paramètres de fonctions avec une valeur par défaut.
Imaginons une fonction qui multiplie deux nombres passés en paramètres, mais le deuxième paramètre est facultatif, et il vaut 1 par défaut :
function multiplier(a, b = 1) {
return a * b;
}Avec ES6, il suffit de définir une valeur par défaut dans la signature même de la fonction. C'est très pratique !
La syntaxe template string
La concaténation de chaîne de caractère a toujours été pénible avec JavaScript.
Mais avec ES6, on peut utiliser des templates strings, qui commencent et se terminent par un backtick (`). Il s'agit d'un symbole particulier qui permet d'insérer facilement des variables dans des chaînes de caractères. On peut insérer des variables dans la chaîne de caractères avec ${variable}, comme ceci :
let name = 'toto';
let email = 'toto@gmail.com';
console.info('${name} a pour email: ${email}');C'est quand même plus pratique que de concaténer des chaines de caractères entre elles !
Les affectations déstructurées (ou le 'Destructuring')
Le nom barbare de ‘déstructuration’ désigne en fait un concept assez simple. C’est un outil formidable pour extraire des données d’un tableau ou d'un objet. Prenons le code suivante :
let Personne = {prenom: "Usain", nom: "Bolt"};
// La destructuration d'un objet :
let {prenom, nom} = Personne;
console.log(prenom); // Affiche "Usain".
console.log(nom); // Affiche "Bolt".
let Personne = ["Usain", "Bolt"];
// La destructuration d'un tableau :
let [prenom, nom] = Personne;
console.log(prenom); // Affiche "Usain".
console.log(nom); // Affiche "Bolt".
Sans la déstructuration, nous serions obligés de faire comme ceci :
let Personne = {prenom: "Usain", nom: "Bolt"};
console.log(Personne.prenom); // Affiche "Usain".
console.log(Personne.nom); // Affiche "Bolt".C'est quand même beaucoup plus pratique comme ça, surtout avec des objets et des tableaux qui seraient plus importants ! 👍
Nous avons vu plusieurs changements majeurs apporté par ES6 à Javascript. Sachez que ES6 est rétro-compatible, donc vous pouvez toujours continuer à développer de la façon dont vous le faites actuellement, puis migrer petit à petit vers la syntaxe d'ES6. Je vous recommande d'adopter ES6 assez rapidement, vous gagnerez en productivité et en lisibilité avec cette nouvelle syntaxe.
Même si les nouveautés de ES6 ne fonctionnent pas encore dans certains navigateurs, beaucoup de développeurs ont commencé à développer avec ES6 et utilisent un transpilateur pour convertir leur code ES6 en du code ES5. Ainsi leur code est lisible par tout les navigateurs.
Un transpilateur est un outil qui permet de publier son code pour les navigateurs qui ne supportent pas encore l'ES6: le rôle du transpilateur est de traduire le code ES6 en code ES5. Comme certaines fonctionnalités d'ES6 ne sont pas disponibles avec ES5, leur comportement est simulé pour permettre aux navigateurs plus anciens de comprendre le code.
Dans la prochaine session, nous verrons que TypeScript permet de transpiler notre code ES6 en ES5, et ajoute une surcouche intéressante au JavaScript afin de pouvoir typer nos variables JavaScript. Et ça, c'est assez nouveau dans le monde du JavaScript !